LoginSignup
hageking
@hageking

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Expressの本番環境

解決したいこと

Expressでバックエンドとフロントエンドを開発し、VPSで外部に公開したいです。
Reactでフロントエンドを作り、バックエンドはExpressでサービスを開発しました。
サービスの概要は,audio/のmp3を流せるサービスです。いいね機能や、再生済みリストなど機能があります。
フロントエンド(React)はnpm run buildを実行し、build配下に生成された、ファイルをバックエンド(Express)のPublicに配置しました。この状態でローカル環境では動作しますが、VPSで公開し、グローバルIPでアクセスするとエラーが発生します。
また、このサイトはcloudflareのtunnnelを使用して公開するため、SSLをしていません。可能であれば、SSLなしで公開したいです。
下記は最小で動作するコードです。

自分で試したこと

実際にVPSで公開した時にブラウザ発生するエラー

The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.
xxx.xxx.xxx.xx/:16 The page requested an origin-keyed agent cluster using the Origin-Agent-Cluster header, but could not be origin-keyed since the origin 'http://xxx.xxx.xxx.xx:3000' had previously been placed in a site-keyed agent cluster. Update your headers to uniformly request origin-keying for all pages on the origin.
xxx.xxx.xxx.xx/:13 

GET https://xxx.xxx.xxx.xx:3000/static/css/main.d014acd4.css net::ERR_SSL_PROTOCOL_ERROR
GET https://xxx.xxx.xxx.xx:3000/static/js/main.f8583b5c.js net::ERR_SSL_PROTOCOL_ERROR
:3000/favicon.ico:1 
GET https://xxx.xxx.xxx.xx:3000/favicon.ico net::ERR_SSL_PROTOCOL_ERROR

ソースコード

const fetch = require('node-fetch');
const express = require('express');
const fs = require('fs');
const path = require('path');
const AsyncLock = require('async-lock');
const helmet = require('helmet');
const lock = new AsyncLock();
const app = express();

app.use(helmet({
    contentSecurityPolicy: {
        directives: {
            defaultSrc: ["'self'"],
            mediaSrc: ["'self'", "*"],
        },
    },
}));
app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    next();
});
const port = 3000;


app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function (req, res) {
    res.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.get('/music/:filename', (req, res) => {
    const filename = req.params.filename;
    const filePath = path.join(__dirname, 'audio', filename);
    res.sendFile(filePath);
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

ディレクトリツリー(モジュール部分は省いてます)

├── app.js
├── audio
│   ├── a.mp3
│   └── b.mp3
├── package-lock.json
├── package.json
├── played_music.json
└── public
    ├── asset-manifest.json
    ├── favicon.ico
    ├── index.html
    ├── logo100.png
    ├── manifest.json
    ├── robots.txt
    └── static
        ├── css
        │   ├── main.d014acd4.css
        │   └── main.d014acd4.css.map
        └── js
            ├── main.f8583b5c.js
            ├── main.f8583b5c.js.LICENSE.txt
            └── main.f8583b5c.js.map

わかる方がいたら教えていただきたいです。

0

1Answer

これが理由かと思います。

The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy.
It was defined either in the final response or a redirect.
Please deliver the response using the HTTPS protocol.
You can also use the 'localhost' origin instead.
See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.

You can also use the 'localhost' origin instead.

localhostを使えばいけるのかな・・・?
この先は分からないのでお調べください。

1

Comments

  1. @hageking

    Questioner

    ありがとうございます。
    httpsに対応させることで解決しました。

  2. 解決してよかったです:smiley:

Your answer might help someone💌